<template>
	<view class="page">
		<view class="info-wrap">
			<view class="top-dack"></view>

			<view class="info tp-w690">

				<view class="chartered_item">
					<image class="img" :src="carInfo.img" mode="aspectFill"></image>
					<view class="chartered_info">
						<view class="name">{{carInfo.carName || ''}}</view>
						<view class="detail">
							<view class="price">￥{{carInfo.price || ''}} <text style="font-size: 24rpx;font-weight: normal;">/公里</text></view>
							<view class="passenger_num">载客人数:{{carInfo && carInfo.number || ''}}</view>
						</view>
					</view>
					<!-- <image class="edit-icon" src="../../static/imgs/icons/edit-icon.png" @click="hanldeGoBack"></image> -->
				</view>

				<view class="info_top-wrap">
					<text class="type">包车</text>
					<text class="time"> {{travelInfo.travelDate || ''}}</text>
					<view class="person">
						<uni-icons class="person-icon" type="person-filled" color="#CCCCCC" size="24"></uni-icons>
						<text>{{travelInfo.personNum || ''}}人</text>
					</view>
				</view>
				<view class="info_content-wrap">
					<view class="address-wrap">
						<view class="step-wrap">
							<view class="dot dot_from"></view>
							<view class="dot dot_to"></view>
						</view>
						<text class="from txt ellispsis1">{{travelInfo.fromArea || ''}}</text>
						<text class="to txt ellispsis1">{{travelInfo.toArea || ''}}</text>
					</view>

				</view>
			</view>

		</view>

		<view class="common-wrap tp-w690" @click="handleChooseReturnTravel">
			<view class="input-wrap">
				<view class="l-wrap">
					<view v-if="!returnStatus" class="icon">
						<image src="../../static/imgs/icons/choose0-icon.png" mode="aspectFill"></image>
					</view>
					<view v-else class="icon">
						<image src="../../static/imgs/icons/choose1-icon.png" mode="aspectFill"></image>
					</view>
					<text>返程</text>
				</view>
				<view class="pirce">{{carInfo.backPrice}}/公里</view>
			</view>
		</view>

		<view v-if="returnStatus" class="common-wrap tp-w690" @click="handleChooseDate">
			<view class="input-wrap">
				<view class="type">返程时间</view>
				<view class="input">
					<input type="text" disabled :value="travelDetailObj.date" placeholder="请选择" />
					<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
				</view>
			</view>
		</view>

		<view class="common-wrap tp-w690">
			<view class="input-wrap">
				<view class="type">意向司机</view>
				<view class="input" @click="handleGoDriverList">
					<input type="text" disabled :value="curDriverObj.name" placeholder="请选择" />
					<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
				</view>
			</view>
		</view>

		<view class="content-wrap tp-w690">
			<view class="rider_info-wrap">
				<!-- 当前选择乘车人列表S -->
				<view class="rider_list" v-if="riderPersionList.length">
					<view class="rider_item" v-for="(it_r,in_r) in riderPersionList" :key="in_r">
						<view class="l-wrap">
							<uni-icons type="trash" size="22" color="#ccc" @click="handleDelRider(it_r)"></uni-icons>
							<text class="name ellispsis1">{{it_r.passengerName}}</text>
							<text class="type">{{it_r.type}}</text>
							<text class="ID">{{it_r.certificateNumber}}</text>
						</view>
						<uni-icons @click="handleGoCommonAddRider(it_r)" type="arrowright" size="22" color="#ccc"></uni-icons>
					</view>
				</view>
				<!-- 当前选择乘车人列表E -->

				<view class="common-btn chengcheren" @click="handleGoCarpoolAddRider">
					<view class="common-btn-con">
						<uni-icons type="plus" size="20" color="#fff"></uni-icons>
						<text class="txt">添加乘车人</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="tp-pd30">
			<view class="level_align tp-br12 tp-h98 tp-bgf tp-ptb0lr30  tp-fz26" @click="isFp = isFp == 1 ? 0 : 1">
				<image v-if="isFp == 1"  class="tp-img32 tp-mr20" src="../../static/imgs/icons/choose0-icon.png" mode="aspectFill"></image>
				<image v-else class="tp-img32 tp-mr20" src="../../static/imgs/icons/choose1-icon.png" mode="aspectFill"></image>
				<view>是否开具发票</view>
			</view>
		</view>

		<view class="common-wrap tp-w690" v-if="textareaShow">
			<view class="input-wrap remark">
				<view class="tit">备注：</view>
				<textarea class="textarea" v-model="travelInfo.remark" placeholder="请输入备注" />
			</view>
		</view>

		<!-- 购买保险 S -->
		<view class="common-wrap tp-w690">
			<view class="input-wrap" v-for="(it_i, in_i) in insuranceList" :key="in_i" @click="handleChooseInsurance(it_i, in_i)">
				<view class="l-wrap">
					<view v-if="!it_i.choosed" class="icon">
						<image src="../../static/imgs/icons/choose0-icon.png" mode="aspectFill"></image>
					</view>
					<view v-else class="icon">
						<image src="../../static/imgs/icons/choose1-icon.png" mode="aspectFill"></image>
					</view>
					<view>购买保险<text class="terms" @click.stop="handleGoInsuranceDetail(it_i)">《{{it_i.name}}》</text></view>
				</view>
				<view class="price">￥{{it_i.price}}</view>
			</view>
		</view>
		<!-- 购买保险 E -->

		<view class="common-wrap tp-w690">
			<view class="input-wrap" @click="handleGoBusCouponList">
				<view class="type">优惠券</view>
				<view class="input">
					<input disabled type="text" :value="choosedBusCoupon.id ? (choosedBusCoupon.useScene ==1 ? `满${choosedBusCoupon.fullAmount}减${choosedBusCoupon.amount}` : `减${choosedBusCoupon.amount}`) : ''"
					 :placeholder="integralPlacholde" />
					<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
				</view>
			</view>
			<!-- <view class="input-wrap">
				<view class="type">积分抵扣</view>
				<view class="input">
					<input type="number" :disabled="integral==0" v-model="usedIntegral" :placeholder="`最多可用${integral}积分`" @input="handleWatchUseIntegral"/>
				</view>
			</view> -->
		</view>

		<view class="buy_description tp-w690" @click="handleChooseBuyDescription">
			<view v-if="!buyDescriptionStatus" class="icon">
				<image src="../../static/imgs/icons/choose0-icon.png" mode="aspectFill"></image>
			</view>
			<view v-else class="icon">
				<image src="../../static/imgs/icons/choose1-icon.png" mode="aspectFill"></image>
			</view>
			<view>
				请您仔细阅读
				<text class="terms">《包车须知》</text>
				<!-- @click.stop="handleGoInsuranceDetail(it_n, 2)" -->
			</view>
		</view>

		<view class="submit-btn">
			<view class="price-wrap">
				<text>总价：</text>
				<text class="price">￥{{totalMoney}}</text>
			</view>
			<view class="r-wrap">
				<view class="detail-btn" @click="handleShowPriceDetail">
					<text>明细</text>
					<uni-icons class="arrow-icon" type="arrowdown" size="20" color="#999"></uni-icons>
				</view>
				<view class="btn" @click="handleSubmitOrder">提交订单</view>
			</view>
		</view>

		<view class="popup-wrap">
			<uni-popup ref="priceDetail" type="bottom">
				<view class="popop_content">
					<view class="ul">
						<view class="li" v-if="!returnStatus">
							<text>单价</text>
							<view class="r-wrap">
								<text class="price">￥{{carInfo.price}}/公里</text>
								<text class="num"></text>
							</view>
						</view>
						<view class="li" v-else>
							<text>往返单价</text>
							<view class="r-wrap">
								<text class="price">￥{{carInfo.backPrice}}/公里</text>
								<text class="num"></text>
							</view>
						</view>
						<view class="li">
							<text>起步价</text>
							<view class="r-wrap">
								<text class="price">{{carInfo.startPrice}}元({{carInfo.startMile}}公里)</text>
								<text class="num"></text>
							</view>
						</view>
						<view class="li">
							<text>总里程</text>
							<view class="r-wrap">
								<text class="price">{{returnStatus ? distance*2 : distance}}公里</text>
								<text class="num"></text>
							</view>
						</view>
						<view class="li" v-if="choosedBusCoupon.id">
							<text>优惠券</text>
							<view class="r-wrap">
								<text class="price">-￥{{choosedBusCoupon.amount}}</text>
								<text class="num"></text>
							</view>
						</view>
						<!-- <view class="li" v-if="usedIntegral">
							<text>积分抵扣</text>
							<view class="r-wrap">
								<text class="price">-{{usedIntegral * Number(exchangeRate)}}</text>
								<text class="num"></text>
							</view>
						</view> -->
						<view class="li" v-if="waitPrice && returnStatus">
							<text>等待费用</text>
							<view class="r-wrap">
								<text class="price">￥{{waitPrice}}</text>
								<text class="num"></text>
							</view>
						</view>
						<!-- 保险 S -->
						<view class="li" v-if="item.choosed" v-for="(item,index) in insuranceList" :key="index">
							<text>{{item.name}}</text>
							<view class="r-wrap">
								<text class="price">￥{{item.price}}</text>
								<text class="num"></text>
							</view>
						</view>
						<!-- 保险 E -->
						<view class="li">
							<text>实付款</text>
							<view class="r-wrap">
								<text class="price tp-red" style="color: red;">￥{{totalMoney}}</text>
								<text class="num"></text>
							</view>
						</view>
					</view>
				</view>
				<view class="submit-btn">
					<view class="price-wrap">
						<text>总价：</text>
						<text class="price">￥{{totalMoney}}</text>
					</view>
					<view class="r-wrap">
						<view class="detail-btn" @click="handleShowPriceDetail('close')">
							<text>明细</text>
							<uni-icons class="arrow-icon" type="arrowup" size="20" color="#999"></uni-icons>
						</view>
						<view class="btn" @click="handleSubmitOrder">提交订单</view>
					</view>
				</view>
			</uni-popup>
		</view>

		<w-picker mode="shortTerm" :value="initChooseStartDate" :current="true" :showMinutes="showMinutes" expand="60"
		 @confirm="handleConfirmChooseDate($event,'shortTerm', travelStatus)" @handleSwitchTravelStatus="handleSwitchTravelStatus"
		 @cancel='handleCancleTimePicker' ref="shortTerm"></w-picker>

		<CommonPay ref="commonPay" :price="totalMoney" :orderInfo="orderInfo" @payMoney="payMoney" @cancle="noPay" @closeK="noPay"
		 @wechatPaySuccess="wechatPaySuccess" @cancel="handleCancleTimePicker"></CommonPay>

		<Notice ref="notice" :noticeInfo="noticeInfo" :isbtn="buyDescriptionStatus" @NoticeOk="buyDescriptionStatus = true"
		 @close="textareaShow = true"></Notice>
	</view>
</template>

<script>
	var QQMapWX = require('@/utils/qqmap-wx-jssdk/qqmap-wx-jssdk.min.js');
	var qqmapsdk;
	import CommonPay from '@/components/common/common-pay.vue'
	import Notice from '@/components/common/notice.vue'
	import Utils from '../../utils/utils.js'
	export default {
		components: {
			CommonPay,
			Notice
		},
		data() {
			return {
				curDriverObj: {}, // 当前所选意向司机
				buyDescriptionStatus: false, // 购买须知
				curPayType: 'balance', // 当前支付方式：balance余额 | 微信wechat
				returnStatus: false, // 是否选择返程

				initChooseStartDate: '', // 初始化返程时间（默认当前时间）
				showMinutes: false, // 时间选择器中是否展示分钟
				travelStatus: 'now', // 立即出发|前后5分钟出发
				travelDetailObj: {
					fromArea: '',
					toArea: '',
					date: '',
					dateObj: {},
					remark: ''
				},
				chooseInsurance: true, // 用户是否选择保险服务
				travelInfo: {}, // 出行信息
				carInfo: {}, // 选择的包车的信息
				insuranceList: [], // 保险列表
				noticeList: [], // 须知列表
				noticeInfo: {}, // 须知信息
				integral: 0, // 个人总积分
				usedIntegral: '', // 使用的积分
				exchangeRate: '', // 积分兑换汇率
				couponList: [], // 优惠券列表
				distance: 1, // 距离
				orderNo: '', // 订单号
				cityCross: '0', // 是否跨市 跨域 0.是 1否
				textareaShow: true, // 文本框显示隐藏
				waitPrice: 0, // 等待费用
				isFp: 1, // 	是否需要发票 0.是 1.否
			};
		},
		onLoad(opt) {
			this.travelInfo = opt && opt.travelInfo && JSON.parse(opt.travelInfo)
			this.carInfo = opt && opt.carInfo && JSON.parse(opt.carInfo)
			this.initMap()
			this.initList()
			this.initChooseDate()
			this.getInsuranceList()
		},
		onShow() {
			this.getCurDriverObj()
			// this.getBusCouponList() // 判断有么有优惠券可选择
		},
		computed: {
			integralPlacholde() { // 积分选择提示
				return this.couponList.length === 0 ? '暂无优惠券可用' : '点我选择优惠券'
			},
			// 优惠前的价格
			originalPrice(){
				let riderNum = this.riderPersionList.length // 当前所添加乘车人数
				let usedIntegral = Number(this.usedIntegral) || 0
				let exchangeRate = Number(this.exchangeRate) || 1
				let money = -usedIntegral * exchangeRate
				this.insuranceList.forEach(item => {
					if (item.choosed) {
						money += Number(item.price) * riderNum * 100
					}
				})
				
				if (this.returnStatus) { // 用户选择了返程
					if (this.distance * 2 > Number(this.carInfo.startMile)) { // 往返大于起步公里数
						money += Number(this.carInfo.startPrice) * 100 + Number(this.carInfo.backPrice) * 100 * (this.distance * 2 - Number(
							this.carInfo.startMile))
					} else { // 往返小于公里数
						money += Number(this.carInfo.startPrice) * 100
					}
					let {
						date: date_e,
						year: year_e,
						month: month_e,
						day: day_e,
						hour: hour_e
					} = this.travelDetailObj.dateObj
					let d_e = (date_e.value || date_e) + ` ${hour_e.value}:00:00`
					let {
						date: date_s,
						year: year_s,
						month: month_s,
						day: day_s,
						hour: hour_s,
						minute: minute_s
					} = this.travelInfo.dateObj
					let d_s = (date_s.value || date_s) + ` ${hour_s.value}:${ minute_s.value || minute_s}:00`
					let hour = Utils.getHourTime(d_s, d_e) - this.distance / 80
					if (hour < 0) {
						hour = 0
					}
					money += hour * this.carInfo.waitPrice * 100
					this.waitPrice = Math.round(hour * this.carInfo.waitPrice * 100) / 100
				} else { // 用户选择单程
					if (this.distance > Number(this.carInfo.startMile)) { // 单程大于起步公里数
						money += Number(this.carInfo.startPrice) * 100 + Number(this.carInfo.price) * 100 * (this.distance - Number(this.carInfo.startMile))
					} else { // 单程小于公里数
						money += Number(this.carInfo.startPrice) * 100
					}
				}
				return money / 100 >= 0 ? (money / 100).toFixed(2) : 0
			},
			totalMoney() {
				let riderNum = this.riderPersionList.length // 当前所添加乘车人数
				let maxRiderNum = this.carInfo.number // 该车次最大乘车人数
				if (riderNum > maxRiderNum) {
					uni.showToast({
						title: '所选乘车人数超出该车最大载客数',
						icon: 'none'
					})
				}
				let usedIntegral = Number(this.usedIntegral) || 0
				let exchangeRate = Number(this.exchangeRate) || 1
				let money = -usedIntegral * exchangeRate
				this.insuranceList.forEach(item => {
					if (item.choosed) {
						money += Number(item.price) * riderNum * 100
					}
				})

				

				if (this.returnStatus) { // 用户选择了返程
					/*
						往返
							大于起步公里数
								起步价 + 单价 * 剩余公里数 + 等待价格
							小于公里数
								起步价	+ 等待价格
					*/
					if (this.distance * 2 > Number(this.carInfo.startMile)) { // 往返大于起步公里数
						money += Number(this.carInfo.startPrice) * 100 + Number(this.carInfo.backPrice) * 100 * (this.distance * 2 - Number(
							this.carInfo.startMile))
					} else { // 往返小于公里数
						money += Number(this.carInfo.startPrice) * 100
					}
					// money += Number(this.carInfo.backPrice) * 100 * this.distance * 2   // 添加起步价之前的计算
					// console.log('往返价格：', Number(this.carInfo.backPrice) * 100 * this.distance * 2);
					let {
						date: date_e,
						year: year_e,
						month: month_e,
						day: day_e,
						hour: hour_e
					} = this.travelDetailObj.dateObj
					let d_e = (date_e.value || date_e) + ` ${hour_e.value}:00:00`
					let {
						date: date_s,
						year: year_s,
						month: month_s,
						day: day_s,
						hour: hour_s,
						minute: minute_s
					} = this.travelInfo.dateObj
					let d_s = (date_s.value || date_s) + ` ${hour_s.value}:${ minute_s.value || minute_s}:00`
					// console.log('d_s开始时间: ', d_s);
					// console.log('d_e结束时间: ', d_e);
					let hour = Utils.getHourTime(d_s, d_e) - this.distance / 80
					if (hour < 0) {
						hour = 0
					}
					// console.log('hour * this.carInfo.waitPrice * 100', hour * this.carInfo.waitPrice * 100);
					// console.log('money', money);
					money += hour * this.carInfo.waitPrice * 100
					// console.log('等待价钱：',  hour * this.carInfo.waitPrice * 100);
					this.waitPrice = Math.round(hour * this.carInfo.waitPrice * 100) / 100
				} else { // 用户选择单程
				/*
					单程
						大于起步公里数
							起步价 + 单价 * 剩余公里数
						小于公里数
							起步价
				*/
					if (this.distance > Number(this.carInfo.startMile)) { // 单程大于起步公里数
						money += Number(this.carInfo.startPrice) * 100 + Number(this.carInfo.price) * 100 * (this.distance - Number(this.carInfo.startMile))
					} else { // 单程小于公里数
						money += Number(this.carInfo.startPrice) * 100
					}
					// money += Number(this.carInfo.price) * 100 * this.distance  // 添加起步价之前的计算
					// console.log('单程价格：', Number(this.carInfo.price) * 100 * this.distance);
				}
				
				let {
					fullAmount,
					amount
				} = this.choosedBusCoupon
				if (this.choosedBusCoupon.useScene == 1) { // 判断是否属于满减
					if (money >= Number(fullAmount) * 100) {
						money = money - Number(amount) * 100
					}
				} else if (this.choosedBusCoupon.useScene == 0) {
					money = money - Number(amount) * 100
				}

				money = Math.round(money)
				return money / 100 >= 0 ? (money / 100).toFixed(2) : 0
			},
			riderPersionList() {
				return this.$store.getters.getRiderList
			},
			orderInfo() {
				let o = {
					orderNo: this.orderNo,
					type: 3
				}
				return o
			},
			choosedBusCoupon: { // // 获取选择的班车优惠券
				get() {
					return this.$store.getters.getChoosedBusCoupon
				},
				set() {}
			}
		},
		watch: {
			totalMoney() {
				// if (this.isUseCoupon == 0) {
				// this.getBusCouponList()
				// }
				if (this.riderPersionList.length == 0) {
					this.couponList = []
					this.choosedBusCoupon = {}
				}
			},
			originalPrice() {
				this.getBusCouponList()
			}
		},
		methods: {
			wechatPaySuccess() {
				this.$refs.commonPay.close()
				uni.showToast({
					title: '支付成功'
				})
				uni.reLaunch({
					url: 'success.order?id=' + this.orderNo + '&type=chartered'
				});
			},
			initMap() {
				qqmapsdk = new QQMapWX({
					key: 'C7JBZ-VQD6D-BVZ4C-PHTJO-HNPSF-ORFT5'
				});
				// #ifdef MP-WEIXIN
				this.getDistance()
				// #endif

				// #ifdef H5
				this.H5pointJuli()
				// #endif
				this.judgeCross(this.travelInfo.fromObj, this.travelInfo.toObj)
			},
			// 跳转到意向司机列表
			handleGoDriverList() {
				uni.navigateTo({
					url: '../../pagesTravel/driverList?type=3&curDriverId=' + this.curDriverObj.id
				});
			},
			// 跳转去修改接送人信息
			handleGoBusAddPickuperDetail(item) {
				uni.navigateTo({
					url: '../../pagesTravel/bus.addPickuper?id=' + item.id
				});
			},
			// 点击删除乘车人
			handleDelRider(item) {
				this.riderPersionList.forEach((it_, in_) => {
					if (item.id === it_.id) {
						this.$store.commit('delRiderList', in_)
					}
				})
			},
			// 点击添加乘车人
			handleGoCarpoolAddRider() { // 此处判断账号中是否有乘车人历史信息，
				if (this.riderPersionList.length >= this.travelInfo.personNum) return uni.showToast({
					title: '当前要添加乘客数量超出预选！',
					icon: 'none'
				})
				this.$http.get(this.$api.getCommonRiderList).then(res => {
					if (res.code === 200) {
						if (res.data.result.length) {
							uni.navigateTo({
								url: '../../pagesTravel/riderList?notBus=1&maxNum=' + this.travelInfo.personNum
							});
						} else {
							uni.navigateTo({
								url: '../../pagesTravel/common.addRider?id=undefined'
							});
						}
					}
				})
			},
			// 取消支付
			noPay() {
				uni.reLaunch({
					// url: '/pagesUser/order/chartered.orderList',
					url: '/pagesUser/order/chartered.orderDetail?orderStatus=toBePaid&id=' + this.orderNo
				});
			},
			scrollTo(el) {
				uni.createSelectorQuery().select(el).boundingClientRect(data => { //目标节点
					// uni.createSelectorQuery().select(".search-address-list").boundingClientRect((res) => { //最外层盒子节点
					uni.pageScrollTo({
						duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
						scrollTop: data.top, //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
					})
					// }).exec()
				}).exec();
			},
			handleSubmitOrder() { // 提交订单 弹出选择支付方式
				const D = this.travelInfo.dateObj.date.value || this.travelInfo.dateObj.date
				const T = (this.travelInfo.dateObj.hour.value || this.travelInfo.dateObj.hour) + ':' + (this.travelInfo.dateObj.minute
					.value || this.travelInfo.dateObj.minute) + ':00'
				const str = D + ' ' + T
				const countTime = Utils.getCountDownTime(str, 0)
				// console.log('str', str);
				// console.log('countTime', countTime);
				if (!this.buyDescriptionStatus) {
					this.scrollTo('.buy_description')
					return uni.showToast({
						title: '请仔细阅读并确认《包车须知》',
						icon: 'none'
					})
				}
				if (!countTime) {
					return uni.showToast({
						title: '请重新选择出发时间',
						icon: 'none'
					})
				}
				if (this.riderPersionList.length != this.travelInfo.personNum) {
					this.scrollTo('.chengcheren')
					return uni.showToast({
						title: '请添加和预选相一致的乘客数量！',
						icon: 'none'
					})
				}

				this.textareaShow = false
				if (this.riderPersionList.length > this.travelInfo.personNum) return uni.showToast({
					title: '当前要添加乘客数量超出预选！',
					icon: 'none'
				})
				let passengerIds_arr = []
				this.riderPersionList.forEach(item => {
					passengerIds_arr.push(item.id)
				})
				const passengerIds = passengerIds_arr.join() || null
				if (!passengerIds) {
					return uni.showToast({
						title: '请选择乘乘车人',
						icon: 'none'
					})
				}

				let insuranceIds_arr = []
				this.insuranceList.forEach(item => {
					if (item.choosed) {
						insuranceIds_arr.push(item.id)
					}
				})
				const insuranceIds = insuranceIds_arr.join() || null

				const couponId = this.choosedBusCoupon.id || null

				const balance = this.usedIntegral || 0

				const driverId = this.curDriverObj.id || null

				const frontTotal = this.totalMoney || 0

				const remark = this.travelInfo.remark || null

				const carId = this.carInfo.id
				
				const shopId = this.carInfo.shopId

				let crop = this.cityCross // 检查是否跨域（跨市） 0.跨域 1.未跨域 
				console.log(crop);

				const {
					personNum: number,
					price,
					fromArea: place,
					toArea: destination,
					fromObj,
					toObj
				} = this.travelInfo;

				let date = this.travelInfo.dateObj
				const startTime =
					`${date.year}-${date.month}-${date.day} ${date.hour.value}:${date.minute.value || date.minute}:00`
				// const startTime = this.travelInfo.date
				let date_back = this.travelDetailObj.dateObj
				const backTime = this.returnStatus ?
					`${date_back.year}-${date_back.month}-${date_back.day} ${date_back.hour.value}:${date_back.minute.value || '00'}:00` :
					null

				const orderSimpleVo = {
					place,
					number,
					startTime,
					backTime,
					placeLat: fromObj.lat,
					placeLng: fromObj.lng,
					destination,
					destinationLat: toObj.lat,
					destinationLng: toObj.lng,
					mile: this.distance,
					type: this.returnStatus ? 1 : 0,
				}

				if (this.riderPersionList.length > this.carInfo.number) return uni.showToast({
					title: '所选乘车人数超出该车最大载客数',
					icon: 'none'
				})

				if (this.returnStatus && !this.travelDetailObj.date) return uni.showToast({
					title: '请选择返程时间',
					icon: 'none'
				})
				const _this = this
				// #ifdef MP-WEIXIN
				uni.requestSubscribeMessage({
				  tmplIds: ['p08IN_BfeNZu8QEIasbY-BrW-sgyEX1z-4mW3BPE7P0'],
				  success (res) { 
					   _this.submitWxNotifyConfirm('p08IN_BfeNZu8QEIasbY-BrW-sgyEX1z-4mW3BPE7P0',res['p08IN_BfeNZu8QEIasbY-BrW-sgyEX1z-4mW3BPE7P0'])

				// #endif
				uni.showLoading({
					title: '提交中...',
					mask: true
				})
				_this.$http.post(_this.$api.submitCharteredOrder, {
					orderSimpleVo,
					passengerIds,
					insuranceIds,
					couponId,
					driverId,
					frontTotal,
					balance,
					remark,
					carId,
					shopId,
					crop,
					isFp: _this.isFp,
				}).then(res => {
					uni.hideLoading()
					if (res.code === 200) {
						_this.$refs.commonPay.show()
						_this.orderNo = res.data.orderNo
					}
				})
				// #ifdef MP-WEIXIN
				  }
				})
				// #endif

			},
			handleShowPriceDetail(s) { // 点击展示价格明细
				if (s === 'close') {
					this.$refs.priceDetail.close()
					this.textareaShow = true
				} else {
					this.$refs.priceDetail.open()
					this.textareaShow = false
				}
			},
			handleGoCommonAddRider(item) { // 跳转去添加乘车人
				uni.navigateTo({
					url: '../../pagesTravel/common.addRider?id=' + item.id
				});
			},
			handleChooseReturnTravel() { // 点击切换是否选择返程
				this.returnStatus = !this.returnStatus
				this.initChooseStartDate =
					`${this.travelInfo.dateObj.date.value || this.travelInfo.dateObj.date} ${this.travelInfo.dateObj.hour.value}:${this.travelInfo.dateObj.minute.value || this.travelDetailObj.dateObj.minute}`
			},
			handleChooseDate() {
				this.$refs.shortTerm.show();
				this.textareaShow = false
			},
			handleConfirmChooseDate(e, snap, travelStatus) {
				if (!e.obj.year) {
					uni.showToast({
						title: '请选择之后的时间',
						icon: 'none'
					})
					return this.initChooseDate()
				}
				this.travelStatus = travelStatus
				this.travelDetailObj.date = e.value.replace(/undefined$/, '00')
				this.travelDetailObj.dateObj = e.obj
				const date = new Date()
				const formatNum = this.formatNum
				const curYear = date.getFullYear();
				const curMonth = formatNum(date.getMonth() + 1);
				const curDay = formatNum(date.getDate());
				const curDateFull = formatNum(curYear) + '-' + formatNum(curMonth) + '-' + formatNum(curDay)
				const eHours = e.obj.hour
				const eMinutes = e.obj.minute || '00'
				if (curDateFull === e.obj.date) {
					this.travelDetailObj.date = `今天 ${eHours}:00`
				}

			},
			handleSwitchTravelStatus(status, travelDateShowBtnDetail) {
				this.travelStatus = status
			},
			hanldeGoBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			handleChooseBuyDescription() {
				// this.buyDescriptionStatus = !this.buyDescriptionStatus
				this.$http.get(this.$api.orderText, {
					type: 13,
				}).then(res => {
					if (res.code === 200) {
						this.noticeInfo = res.data.list[0]
						this.textareaShow = false
						this.$refs.notice.show()
					}
				})
			},
			handleGoInsuranceDetail(item, type) { // 跳转到保险详情
				let obj = {
					type: 1,
					id: item.id,
					title: item.name || item.title
				}
				if (type) {
					obj.type = type
				}
				uni.navigateTo({
					url: '../../pagesTravel/serviceDetail?info=' + JSON.stringify(obj),
				});
			},
			handleCancleTimePicker() { // 时间选择器关闭的时候触发
				this.textareaShow = true
			},
			handleGoBusCouponList() { //跳转到班车优惠券列表
				if (!this.riderPersionList.length) return
				if(this.originalPrice === 0) return
				// this.$http.get(this.$api.getCommonCouponList + `?type=3&totalPrice=${this.totalMoney}`).then(res => { // 检查有无优惠券
				// 	if (res.code === 200) {
				// 		this.couponList = res.data
				if (!this.couponList.length) return
				const couponInfo = JSON.stringify({
					type: 3,
					totalPrice: this.originalPrice,
					shopId: this.carInfo.shopId
				})
				uni.navigateTo({
					url: '../../pagesTravel/bus.couponList?couponInfo=' + couponInfo
				});
				// 	}
				// })
			},
			getInsuranceList() { // 获取保险列表
				this.$http.get(this.$api.getCharteredInsuranceList + '?shopId=' + this.carInfo.shopId).then(res => {
					if (res.code === 200) {
						this.insuranceList = res.data.insurance
						this.insuranceList.map(item => {
							item.choosed = true
						})
						this.noticeList = res.data.textDescription
						this.integral = res.data.jifen
						this.exchangeRate = res.data.rate
					}
				})
			},
			getRiderList() { // 获取乘车列表
				this.riderPersionList = this.$store.getters.getRiderList
			},
			getCurDriverObj() { // 获取当前所选择的意向司机信息
				this.curDriverObj = { ...this.$store.getters.getChoosedDriverObj
				}
			},
			// #ifdef H5
			// h5计算距离
			H5pointJuli() {
				// const {
				// 	fromObj,
				// 	toObj
				// } = this.travelDetailObj;
				let _this = this
				let formGet = this.travelInfo.fromObj.lat + ',' + this.travelInfo.fromObj.lng
				let toGet = this.travelInfo.toObj.lat + ',' + this.travelInfo.toObj.lng
				this.$http.get(this.$api.pointJuli + '?from=' + formGet + '&to=' + toGet).then(res => {
					if (res.data.message == 'query ok') {
						_this.distance = res.data.result.rows[0].elements[0].distance / 1000
					}
				})
			},
			// #endif
			// #ifdef MP-WEIXIN
			getDistance() {
				const {
					fromObj,
					toObj
				} = this.travelInfo;
				let _this = this
				qqmapsdk.calculateDistance({ // 计算两点的距离
					mode: 'driving',
					from: {
						latitude: fromObj.lat,
						longitude: fromObj.lng,
					},
					to: [{
						latitude: toObj.lat,
						longitude: toObj.lng,
					}],
					success(res) {
						if (res.message == 'query ok') {
							_this.distance = res.result.elements[0].distance / 1000
						}
					}
				})
			},
			// #endif
			initList() { // 清空列表
				this.$store.commit('delRiderList')
				this.$store.commit('delChoosedDriverObj')
				this.$store.commit('delChoosedBusCoupon')
			},
			payMoney(pwd) { // 输完密码支付
				this.$http.get(this.$api.payCharteredOrder, {
					orderNo: this.orderNo,
					payWord: pwd
				}).then(res => {
					if (res.code === 200) { // 密码正确，支付成功
						// this.$refs.commonPay.closeKeyBoard()
						this.$refs.commonPay.finishCloseKeyBoard()
						this.textareaShow = true
						uni.reLaunch({
							url: 'success.order?id=' + this.orderNo + '&type=chartered'
						});
					} else if (res.code == 2012) {
						// uni.navigateTo({
						// 	url: '/pagesUser/editPayPwd?type=0'
						// });
					}
				})
			},
			initChooseDate() {
				this.travelDetailObj.dateObj = this.travelInfo.dateObj

				this.initChooseStartDate =
					`${this.travelInfo.dateObj.date.value || this.travelInfo.dateObj.date} ${this.travelInfo.dateObj.hour.value}:${this.travelInfo.dateObj.minute.value || this.travelDetailObj.dateObj.minute}`
				return
				let date = new Date()
				let formatNum = this.formatNum
				const year = date.getFullYear()
				const month = formatNum(date.getMonth() + 1);
				const day = formatNum(date.getDate());
				let hours = formatNum(date.getHours());
				let minutes = formatNum(date.getMinutes());
				let arr = []
				for (let i = 0; i < 12; i++) {
					arr.push(i * 5)
				}
				minutes = formatNum(arr.find((el) => el > minutes)) !== 'undefined' ? formatNum(arr.find((el) => el > minutes)) :
					'00'
				if (!Number(minutes)) {
					hours = formatNum(Number(hours) + 1);
				}
				this.initChooseStartDate = `${year}-${month}-${day} ${hours}:${minutes}`
				this.travelDetailObj.date = `今天 ${hours}:${minutes}`
				this.travelDetailObj.dateObj = {
					date: {
						label: '今天',
						value: `${year}-${month}-${day}`
					},
					hour: {
						label: hours,
						value: hours
					},
					minute: {
						label: minutes,
						value: minutes
					},
					year,
					month,
					day
				}
			},
			formatNum(num) {
				return String(num).padStart(2, '0')
			},
			handleChooseInsurance(item, i) { // 选择保险服务
				item.choosed = !item.choosed
				this.$set(this.insuranceList, i, item)
			},
			async judgeCross(fromObj, toObj) { // 判断是否跨市区
				let _this = this
				// #ifdef MP-WEIXIN
				qqmapsdk.reverseGeocoder({
					location: {
						latitude: fromObj.lat,
						longitude: fromObj.lng
					},
					success: function(res_from) {
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: toObj.lat,
								longitude: toObj.lng
							},
							success: function(res_to) {
								let city_to = res_to.result.address_component.city
								let city_from = res_from.result.address_component.city
								// 0.跨域 1.未跨域 
								_this.cityCross = city_to === city_from ? '1' : '0'
							},
						});
					},
				});
				// #endif

				// #ifdef H5
				let data = await _this.exchangeDingwei(fromObj.lat, fromObj.lng)
				if (data) {
					let data1 = await _this.exchangeDingwei(toObj.lat, toObj.lng)
					if (data1) {
						let city_to = data1.result.address_component.city
						let city_from = data.result.address_component.city
						_this.cityCross = city_to === city_from ? '1' : '0'
					}
				}
				// #endif

			},
			getBusCouponList() { // 获取优惠券列表
				this.$http.get(this.$api.getCommonCouponList + `?type=3&totalPrice=${this.originalPrice}&shopId=${this.carInfo.shopId}`).then(res => {
					if (res.code === 200) {
						this.couponList = res.data
						if (!res.data.length) {
							this.$store.commit('delChoosedBusCoupon')
							return
						}
						let {
							fullAmount,
							amount
						} = this.choosedBusCoupon
						if (this.choosedBusCoupon.useScene == 1) { // 判断是否属于满减
							if (Number(this.originalPrice) < Number(fullAmount)) {
								this.$store.commit('delChoosedBusCoupon')
							}
						} else if (this.choosedBusCoupon.useScene == 0) {
							if (Number(this.originalPrice) < Number(amount)) {
								this.$store.commit('delChoosedBusCoupon')
							}
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding-top: 512rpx;

		/deep/.input-placeholder {
			font-size: 30rpx;
			font-weight: normal;
			color: #ccc;
		}
	}

	.info-wrap {
		// height:342rpx;
		background: #f5f5f5;
		position: fixed;
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		top: 0;
		/* #endif */
		left: 0;
		right: 0;
		z-index: 9;

		.top-dack {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 90rpx;
			background-color: $blue;
			z-index: -1;
		}



		.info {
			position: absolute;
			top: 20rpx;
			left: 0;
			right: 0;
			// height:342rpx;
			background: #fff;
			border-radius: 12rpx;
			padding: 40rpx;
			box-sizing: border-box;
			z-index: 9;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			overflow: hidden;

			.info_top-wrap {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				font-size: 30rpx;

				.type {
					padding: 12rpx;
					background-color: #FFF2E0;
					color: $yellow;
					font-size: 22rpx;
					border-radius: 8rpx;
				}

				.time {
					padding: 0 74rpx 0 20rpx;
				}

				.person {
					.person-icon {
						margin-right: 20rpx;
					}
				}
			}

			.info_content-wrap {
				display: flex;
				flex: 1;
				justify-content: space-between;
				padding-top: 20rpx;

				.address-wrap {
					display: flex;
					flex: 1;
					flex-direction: column;
					justify-content: space-between;
					font-size: 30rpx;
					font-weight: bold;
					position: relative;

					.step-wrap {
						display: flex;
						justify-content: space-between;
						flex-direction: column;
						height: 90rpx;
						position: absolute;
						top: 10rpx;
						left: 0rpx;

						&::before {
							content: '';
							position: absolute;
							left: 50%;
							transform: translateX(-50%);
							height: 100%;
							width: 1px;
							background-color: #ccc;
						}

						.dot {
							height: 20rpx;
							width: 20rpx;
							border: 1px solid #ccc;
							border-radius: 50%;
							position: relative;

							&::before {
								content: '';
								position: absolute;
								left: 50%;
								top: 50%;
								transform: translate(-50%, -50%);
								height: 100%;
								width: 100%;
								border-radius: 50%;
								background-color: #fff;
							}
						}
					}

					.txt {
						margin-bottom: 29rpx;
					}

					.from,
					.to {
						padding-left: 44rpx;
					}

					.time-wrap {
						padding-left: 44rpx;
						font-size: 30rpx;
						font-weight: normal;
						display: flex;
						align-items: center;
					}
				}
			}

			.chartered_item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 160rpx;
				border-bottom: 1px solid #ebebeb;
				margin-bottom: 37rpx;

				&:last-child {
					border: none;
				}

				&.un_item {
					background-color: #eaeaea;
					border-bottom: 1px solid #fff;

					&:last-child {
						border: none;
					}
				}

				.img {
					width: 156rpx;
					height: 89rpx;
					background-color: pink;
					margin-right: 36rpx;
				}

				.chartered_info {
					flex: 1;

					.name {
						font-size: 30rpx;
					}

					.detail {
						margin-top: 17rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.price {
							font-size: 36rpx;
							color: $red;
							font-weight: bold;
						}

						.passenger_num {
							font-size: 24rpx;
							color: #666;
						}
					}
				}

				.edit-icon {
					padding-left: 80rpx;
				}
			}
		}

	}

	.common-wrap {
		border-radius: 12rpx;
		background-color: #fff;
		padding: 0 30rpx;
		box-sizing: border-box;
		margin-top: 20rpx;

		.input-wrap {
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #ebebeb;
			font-size: 30rpx;

			&:last-child {
				border: none;
			}

			&.remark {
				height: 200rpx;
				align-items: flex-start;
				padding: 30rpx 0;
				box-sizing: border-box;

				.textarea {
					flex: 1;
					height: 160rpx;
					z-index: 0;
				}
			}

			.l-wrap {
				display: flex;
				align-items: center;

				.icon {
					display: inline-block;
					height: 30rpx;
					width: 30rpx;
					margin-right: 20rpx;
				}

				.terms {
					color: $blue;
				}
			}

			.pirce {
				color: $red;
				padding-right: 10rpx;
			}

			.ul_service {
				display: flex;

				.li_service {
					display: flex;
					align-items: center;
					font-size: 30rpx;
					margin-left: 80rpx;

					.txt {
						margin-left: 20rpx;
					}
				}
			}

			.type {
				font-size: 30rpx;
			}

			.input {
				flex: 1;
				text-align: right;
				font-size: 30rpx;
				display: flex;

				input {
					padding-right: 6rpx;
				}
			}
		}
	}

	.content-wrap {
		margin-top: 20rpx;

		.rider_info-wrap {
			width: 690rpx;
			background: #fff;
			border-radius: 12rpx;
			padding: 40rpx 30rpx;
			box-sizing: border-box;

			.rider_list {
				margin-bottom: 40rpx;

				.rider_item {
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #ebebeb;

					.l-wrap {
						display: flex;
						align-items: center;
						font-size: 28rpx;

						.name {
							font-size: 30rpx;
							padding: 0 10rpx 0 20rpx;
							width: 120rpx;
						}

						.type {
							padding-right: 40rpx;
						}
					}
				}
			}

			.common-btn {
				width: 520rpx;

				display: flex;
				align-items: center;
				justify-content: space-evenly;

				.common-btn-con {
					display: flex;
					align-items: center;

					.txt {
						margin-left: 20rpx;
					}
				}
			}
		}
	}

	.buy_description {
		position: relative;
		font-size: 28rpx;
		padding: 30rpx 0 147rpx 50rpx;
		box-sizing: border-box;
		line-height: 50rpx;

		.icon {
			display: inline-block;
			height: 30rpx;
			width: 30rpx;
			margin-right: 20rpx;
			position: absolute;
			top: 36rpx;
			left: 0;
		}

		.terms {
			color: $blue;
		}
	}

	.popup-wrap {
		.popop_content {
			background-color: #fff;
			border-top-left-radius: 12rpx;
			border-top-right-radius: 12rpx;
			padding: 20rpx 30rpx 98rpx;

			.ul {
				.li {
					height: 98rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #EBEBEB;
					font-size: 26rpx;

					&:last-child {
						border: none;
					}

					.r-wrap {
						.price {
							margin-right: 50rpx;
						}

						.num {
							margin-right: 30rpx;
						}
					}
				}
			}
		}

		.submit-btn {
			border-top: 1px solid #EBEBEB;
		}
	}

	.submit-btn {
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		background-color: #fff;
		height: 98rpx;
		font-size: 26rpx;
		color: #666;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;

		.price-wrap {
			flex: 1;
			display: flex;
			align-items: center;

			.price {
				color: $red;
				font-size: 36rpx;
				margin-left: 24rpx;
			}
		}

		.r-wrap {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.detail-btn {
				display: flex;
				align-items: center;
			}

			.arrow-icon {
				margin: 0 40rpx 0 16rpx;
			}

			.btn {
				width: 240rpx;
				height: 72rpx;
				line-height: 72rpx;
				background: $yellow;
				border-radius: 12rpx;
				color: #fff;
				text-align: center;
				font-size: 32rpx;
			}
		}
	}

	.common-btn {
		box-shadow: none;
	}
</style>
